<%--
  Created by IntelliJ IDEA.
  User: HKemmm
  Date: 2022/3/7
  Time: 23:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Cart</title>
    <meta name="description" content="">
    <meta name="robots" content="noindex, follow"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, follow"/>
    <!--All Css Here-->

    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/static/moban/css/bootstrap.min.css">
    <!-- Linearicon CSS-->
    <link rel="stylesheet" href="/static/moban/css/linearicons.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="/static/moban/css/font-awesome.min.css">

    <!-- Animate CSS-->
    <link rel="stylesheet" href="/static/moban/css/animate.css">
    <!-- Owl Carousel CSS-->
    <link rel="stylesheet" href="/static/moban/css/owl.carousel.min.css">
    <!-- Slick CSS-->
    <link rel="stylesheet" href="/static/moban/css/slick.css">
    <!-- Meanmenu CSS-->
    <link rel="stylesheet" href="/static/moban/css/meanmenu.min.css">
    <!-- Easyzoom CSS-->
    <link rel="stylesheet" href="/static/moban/css/easyzoom.css">
    <!-- Venobox CSS-->
    <link rel="stylesheet" href="/static/moban/css/venobox.css">
    <!-- Jquery Ui CSS-->
    <link rel="stylesheet" href="/static/moban/css/jquery-ui.css">
    <!-- Nice Select CSS-->
    <link rel="stylesheet" href="/static/moban/css/nice-select.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="/static/moban/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/static/moban/css/responsive.css">
    <!-- Modernizr Js -->
    <script src="/static/moban/js/vendor/modernizr-2.8.3.min.js"></script>


    <style>
        .right-icon {
            margin-top: 22px;
        }
        .car-background {
            margin: 0;
            width: 100%;
            margin-top: 200px;
        }

        .cart_img {
            height: 120px;
            width: 120px;
            overflow: hidden;
            margin: auto;
        }

        .cart_img img {
            width: 100%;
            height: 100%;
        }

        .cart-plus-minus {
            width: 76px;
            height: 46px;
            margin: 0 auto;

        }

        .cart-plus-minus input {
            height: 46px;
            width: 48px;
            border: 1px solid #ebebeb;
        }

        .qtybutton {
            border-bottom: 1px solid #ebebeb;
            border-right: 1px solid #ebebeb;
            border-top: 1px solid #ebebeb;
            cursor: pointer;
            height: 23px;
            line-height: 20px;
            position: absolute;
            text-align: center;
            width: 28px;
            line-height: 20px;

            position: relative;
            top: -46px;
            left: 60px;
        }

        .product-subtotal > .price {
            font-size: 16px;
            font-weight: 700;
            text-decoration: none;
            color: #333333;;
        }

        .choice {
            width: 20px;
            height: 20px;
        }

        .delGoods {
            cursor: pointer;
        }
    </style>
</head>
<body>


<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<div class="wrapper">
    <!--Header Area Start-->
    <header>
        <div class="header-container">
            <div class="header-area header-absolute header-sticky pt-30 pb-30">
                <div class="container-fluid pl-50 pr-50">
                    <div class="row">
                        <!--Header Logo Start-->
                        <div class="col-lg-3 col-md-3">
                            <div class="logo-area">
                                <a href="/page/index.jsp">
                                    <img src="/static/moban/img/logo/logo.png" alt="">
                                </a>
                            </div>
                        </div>
                        <!--Header Logo End-->
                        <!--Header Menu And Mini Cart Start-->
                        <div class="col-lg-9 col-md-9 text-lg-right">
                            <!--Main Menu Area Start-->
                            <div class="header-menu">
                                <nav>
                                    <ul class="main-menu">
                                        <li><a href="/page/index.jsp">首页</a></li>
                                        <li><a href="shop.html">商品</a></li>
                                    </ul>
                                </nav>
                            </div>
                            <!--Main Menu Area End-->
                            <!--Header Option Start-->
                            <div class="header-option">
                                <div class="mini-cart-search">
                                    <div class="mini-cart">
                                        <a href="#">
                                                <span class="cart-icon">
                                                   <span class="cart-quantity">2</span>
                                                </span>
                                            <span class="cart-title">购物车 <br><strong>12386.00元</strong></span>
                                        </a>
                                    </div>
                                    <div class="header-search">
                                        <div class="search-box">
                                            <a href="#" class="right-icon"><i class="fa fa-search"></i></a>
                                            <div class="search-dropdown">
                                                <form action="#">
                                                    <input name="search" id="search" placeholder=""
                                                           value="Search product..."
                                                           onblur="if(this.value==''){this.value='Search product...'}"
                                                           onfocus="if(this.value=='Search product...'){this.value=''}"
                                                           type="text">
                                                    <button type="submit"><i class="fa fa-search"></i></button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="currency">
                                        <div class="currency-box">
                                            <a href="#" class="right-icon"><i class="fa fa-th"></i></a>
                                            <div class="currency-dropdown">
                                                <input type="hidden" id="userId" value="${sessionScope.User.id}">
                                                <ul class="menu-top-menu">
                                                    <li><a href="/shop/centre">帐 户:${sessionScope.User.name}</a>
                                                    </li>
                                                    <li><a href="#">收藏夹</a></li>
                                                    <li><a href="/shop/car?id=${sessionScope.User.id}">购物车</a>
                                                    </li>

                                                    <c:if test="${sessionScope.User.id != null}">
                                                        <li><a href="#">退出</a></li>
                                                    </c:if>

                                                    <c:if test="${sessionScope.User == null}">
                                                        <li><a href="#">登录</a></li>
                                                    </c:if>
                                                </ul>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--Header Option End-->
                        </div>
                        <!--Header Menu And Mini Cart End-->
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <!--Mobile Menu Area Start-->
                            <div class="mobile-menu d-lg-none"></div>
                            <!--Mobile Menu Area End-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!--Header Area End-->

    <!--Car Area Start-->
    <div class="car-background">
        <div class="umino-cart-area">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <form action="javascript:void(0)">
                            <div class="table-content table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th class="umino-product-remove">删除</th>
                                        <th class="umino-product-thumbnail">图片</th>
                                        <th class="cart-product-name">产品</th>
                                        <th class="umino-product-quantity">数量</th>
                                        <th class="umino-product-subtotal">价格</th>
                                        <th class="umino-product-price">选择</th>
                                    </tr>
                                    </thead>
                                    <tbody id="cart_context">

                                    <c:forEach items="${carts}" var="cart">
                                        <tr class="myRow">
                                            <td class="umino-product-remove">
                                                <a class="delGoods">
                                                    <i class="fa fa-trash" title="Remove"
                                                       onclick="delGoods(${cart.id})"></i>

                                                </a>
                                            </td>
                                            <td class="umino-product-thumbnail">

                                                <div class="cart_img">
                                                    <a href="/Goods/product?id=${cart.goods.id}">
                                                        <img src="/myimg/${cart.goods.img}"
                                                             alt="Umino's Cart Thumbnail"></a>
                                                </div>
                                            </td>
                                            <td class="umino-product-name"><a
                                                    href="/Goods/product?id=${cart.goods.id}">${cart.goods.name}</a>
                                            </td>
                                            <td class="quantity">
                                                <div class="cart-plus-minus">
                                                    <input class="cart-plus-minus-box number" value="${cart.number}"
                                                           type="text">
                                                    <div class="inc qtybutton"><i class="fa fa-angle-up btn_num"></i>
                                                    </div>
                                                    <div class="dec qtybutton"><i class="fa fa-angle-down btn_num"></i>
                                                    </div>


                                                </div>
                                            </td>
                                            <td class="product-subtotal"><span
                                                    class="amount price">${cart.goods.price}元</span>
                                            </td>
                                            <td style="text-align: center;margin: auto"
                                                class="umino-product-price">
                                                <input type="checkbox" name="choice" class="choice"
                                                       value="${cart.goods.id}">
                                                <input type="hidden" id="price" value="${cart.goods.price}">
                                                <input type="hidden" id="num" value="${cart.number}">
                                                <input type="hidden" id="cid" value="${cart.id}" class="cart_id">
                                            </td>
                                        </tr>
                                    </c:forEach>


                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <div class="col-md-5 ml-auto">
                                    <div class="cart-page-total">
                                        <h2>购物车价格</h2>
                                        <ul>
                                            <li>总价格 <span id="submoney">0元</span></li>
                                            <li>价&nbsp;&nbsp;格 <span id="paymoney">0元</span></li>
                                        </ul>
                                        <a style="color: white" onclick="creatOrder()">提交订单</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--Car Area End-->

    <!--Footer Area Start-->
    <footer>
        <div class="footer-container">
            <!--Footer Top Area Start-->
            <div class="footer-top-area black-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-40">
                                <div class="footer-title">
                                    <h3>My Account</h3>
                                </div>
                                <ul class="link-widget">
                                    <li><a href="#">About Us</a></li>
                                    <li><a href="#">Team Member</a></li>
                                    <li><a href="#">Career</a></li>
                                    <li><a href="#">Specials</a></li>
                                    <li><a href="shop.html">Best sellers</a></li>
                                    <li><a href="#">Our stores</a></li>
                                    <li><a href="#">Contact us</a></li>
                                </ul>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-40">
                                <div class="footer-title">
                                    <h3>Information</h3>
                                </div>
                                <ul class="link-widget">
                                    <li><a href="#">About Us</a></li>
                                    <li><a href="#">Contact Us</a></li>
                                    <li><a href="#">My orders</a></li>
                                    <li><a href="#">Terms & Conditions</a></li>
                                    <li><a href="#">Returns & Exchanges</a></li>
                                    <li><a href="#">Shipping & Delivery</a></li>
                                    <li><a href="#">Privacy Policy</a></li>
                                </ul>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-40">
                                <div class="footer-title">
                                    <h3>Quick Links</h3>
                                </div>
                                <ul class="link-widget">
                                    <li><a href="#">Support Center</a></li>
                                    <li><a href="#">Term & Conditions</a></li>
                                    <li><a href="#">Shipping</a></li>
                                    <li><a href="#">Privacy Policy</a></li>
                                    <li><a href="#">Help</a></li>
                                    <li><a href="#">Products Return</a></li>
                                    <li><a href="#">FAQS</a></li>
                                </ul>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-40">
                                <div class="footer-title">
                                    <h3>Categories</h3>
                                </div>
                                <ul class="link-widget">
                                    <li><a href="#">Bedroom</a></li>
                                    <li><a href="#">Furniture</a></li>
                                    <li><a href="#">Livingroom</a></li>
                                    <li><a href="#">Mobiles & Tablets</a></li>
                                    <li><a href="#">Men</a></li>
                                    <li><a href="#">Women</a></li>
                                    <li><a href="#">Accessories</a></li>
                                </ul>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                    </div>
                </div>
            </div>
            <!--Footer Top Area End-->
            <!--Footer Middle Area Start-->
            <div class="footer-middle-area black-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-30">
                                <div class="footer-logo">
                                    <a href="index.html"><img src="/static/moban/img/logo/logo-footer.png" alt=""></a>
                                </div>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-30">
                                <div class="footer-info">
                                    <div class="icon">
                                        <i class="fa fa-home"></i>
                                    </div>
                                    <p>Address : No 40 Baria Sreet 15/2 NewYork City, NY, United States.</p>
                                </div>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-30">
                                <div class="footer-info">
                                    <div class="icon">
                                        <i class="fa fa-envelope-open-o"></i>
                                    </div>
                                    <p>Email: <br>info@yourmail.com</p>
                                </div>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <!--Single Footer Widget Start-->
                            <div class="single-footer-widget mb-30">
                                <div class="footer-info">
                                    <div class="icon">
                                        <i class="fa fa-mobile"></i>
                                    </div>
                                    <p>Phone: <br>(+68) 123 456 7890</p>
                                </div>
                            </div>
                            <!--Single Footer Widget End-->
                        </div>
                    </div>
                </div>
            </div>
            <!--Footer Middle Area End-->
            <!--Footer Bottom Area Start-->
            <div class="footer-bottom-area black-bg pt-50 pb-50">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <!--Footer Payment Start-->
                            <div class="footer-payments-image">
                                <img src="/static/moban/img/payment/payment-icon.png" alt="">
                            </div>
                            <!--Footer Payment End-->
                            <!--Footer Menu Start-->
                            <div class="footer-menu text-center">
                                <nav>
                                    <ul>
                                        <li><a href="#">Site Map</a></li>
                                        <li><a href="#">Search Terms</a></li>
                                        <li><a href="#">Advanced Search</a></li>
                                        <li><a href="#">Orders and Returns</a></li>
                                        <li><a href="#">Contact Us</a></li>
                                    </ul>
                                </nav>
                            </div>
                            <!--Footer Menu End-->
                            <!--Footer Copyright Start-->
                            <div class="footer-copyright">
                                <p>Copyright &copy; 2018.Company name All rights reserved.<a target="_blank"
                                                                                             href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                                </p>
                            </div>
                            <!--Footer Copyright End-->
                        </div>
                    </div>
                </div>
            </div>
            <!--Footer Bottom Area End-->
        </div>
    </footer>
    <!--Footer Area End-->
</div>


<!--All Js Here-->

<!--Jquery 1.12.4-->
<script src="/static/moban/js/vendor/jquery-1.12.4.min.js"></script>
<!--Popper-->
<script src="/static/moban/js/popper.min.js"></script>
<!--Bootstrap-->
<script src="/static/moban/js/bootstrap.min.js"></script>
<!--Imagesloaded-->
<script src="/static/moban/js/imagesloaded.pkgd.min.js"></script>
<!--Isotope-->
<script src="/static/moban/js/isotope.pkgd.min.js"></script>
<!--Waypoints-->
<script src="/static/moban/js/waypoints.min.js"></script>
<!--Counterup-->
<script src="/static/moban/js/jquery.counterup.min.js"></script>
<!--Carousel-->
<script src="/static/moban/js/owl.carousel.min.js"></script>
<!--Slick-->
<script src="/static/moban/js/slick.min.js"></script>
<!--Meanmenu-->
<script src="/static/moban/js/jquery.meanmenu.min.js"></script>
<!--Easyzoom-->
<script src="/static/moban/js/easyzoom.min.js"></script>
<!--Nice Select-->
<script src="/static/moban/js/jquery.nice-select.min.js"></script>
<!--ScrollUp-->
<script src="/static/moban/js/jquery.scrollUp.min.js"></script>
<!--Wow-->
<script src="/static/moban/js/wow.min.js"></script>
<!--Venobox-->
<script src="/static/moban/js/venobox.min.js"></script>
<!--Jquery Ui-->
<script src="/static/moban/js/jquery-ui.js"></script>
<!--Countdown-->
<script src="/static/moban/js/jquery.countdown.min.js"></script>
<!--Plugins-->
<script src="/static/moban/js/plugins.js"></script>
<!--Main Js-->
<script src="/static/moban/js/main.js"></script>


<script src="/static/js/utile.js"></script>
<script src="/static/js/cart.js"></script>


<script>
    var uid = $("#userId").val();
    allmoney();

    function creatOrder() {
        const item = $(".choice:checkbox:checked");

        if (item.length == 0 || item == null) {
            alert("未选中商品！");
            return false;
        }

        $.ajax({
            url: "/address/addresNum",
            data: {uid: uid},
            success: function (rep) {
                if (rep == 0 || rep == null) {
                    alert("未设置收货地址！");
                    location.href = "/address/addressInfo?uid=" + uid;
                }
            }
        });

        // console.log(item);
        const object = new Array();
        for (let i = 0; i < item.length; i++) {
            // console.log($(item[i]).val());      //商品id
            // console.log($(item[i]).siblings("#price").val())  //价格
            // console.log($(item[i]).siblings("#num").val())    //数量
            // console.log($(item[i]).siblings("#cid").val())   //购物车id
            const car = {
                id: $(item[i]).siblings("#cid").val(),
                goodsId: $(item[i]).val(),
                number: $(item[i]).siblings("#num").val(),
                price: $(item[i]).siblings("#price").val()
            };
            object.push(car);


        }
        // console.log(object);


        $.ajax({
            url: "/order/creatOrder",
            data: {
                car: JSON.stringify(object),
                uid: $("#userId").val()
            },
            success: function (rep) {

                location.href = "/order/confirmOrder?id=" + rep;

            }

        });


    }
</script>
</body>
</html>



